<template>
    <div>
          <div class="price">
            <img src="../assets/logo.png" alt="">
          </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
import { getLogin } from "@/api/api";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    // ...mapActions(["setLogin"]),
    // ...mapMutations(["setLogin"]),
    //不用vuex写法
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
        let res=await getLogin(this.ruleForm)
        console.log(res)
        if(res.meta.status==200){
          this.$message.success(res.meta.msg)
          localStorage.setItem('token',res.data.token)
          this.$router.push('/home')
        }
        } else {
          this.$message.success(res.meta.msg)
          console.log('error submit!!');
          return false;
        }
      });
    },
    //同步操作
    // submitForm(formName) {
    //   this.$refs[formName].validate(async valid => {
    //     if (valid) {
    //       let res = await getLogin(this.ruleForm);
    //       if (res.meta.status === 200) {
    //         this.$message.success(res.meta.msg);
    //         this.setLogin(res.data.token);
    //         this.$router.push("/home");
    //       }
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },

    //异步操作
    //  submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.$store.dispatch('setLogin',this.ruleForm).then(res=>{
    //         if(res.meta.status===200){
    //           Location.href='/home'
    //         }
    //       })
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang='scss' scoped >
.price {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>

